iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 25
2
影片教學

CSS 優良部份系列 第 25 篇

OOCSS 容器與內容分離

12th鐵人賽
1342 瀏覽

  • 分享至 

  • xImage
    •  

Yes

在 Bootstrap 上，在 Layout Grid 與 Components 之間很容易達到容器與內容分離概念，而 Tailwind 本身也可以透過 utility 概念來實做。

本單元主要講解 OOCSS 容器與內容分離導讀，讓讀者可以先理解其觀念後，才能夠寫出優良可維護的 CSS。

本節重點

  1. 圖像化講解 OOCSS 概念
  2. class 依賴關係講解
  3. 講解格線系統的容器概念

文獻連結

  1. Tailwind 格線系統

上一篇
如何提升 CSS Class 可讀性
下一篇
【Bootstrap 5 客製化教學 - 4】透過 Bootstrap 達到容器與內容分離
系列文
CSS 優良部份 共 30 篇
  1. 26
    【Bootstrap 5 客製化教學 - 4】透過 Bootstrap 達到容器與內容分離
  2. 27
    【Tailwind CSS 教學 - 14】透過 Tailwind 達到容器與內容分離
  3. 28
    【Bootstrap 5 客製化教學 - 5】RFS 響應式文字設定
  4. 29
    【Bootstrap 5 客製化教學 - 6】BS5 utilities 客製化，讓他變得跟 TailwindCSS 一樣強！
  5. 30
    【終章】 Tailwind VS Bootstrap5 誰能稱霸？
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙